<template>
    <!-- container -->
    <div class="container">
        <!-- header start -->
        <div class="header">
            <!-- 选项块 -->
            <div class="choose">
                <a href="#" class="img_a">
                    <!-- <img class="logo" src="../assets/logo.png" alt="" /> -->
                </a>
                <ul id="ch_item">
                    <li class="lis">
                        <a href="#" class="first_a">发现音乐</a>
                    </li>
                    <li class>
                        <a href="#">下载客户端</a>
                    </li>
                    <li class>
                        <a href="#">音乐现场</a>
                    </li>
                    <li class>
                        <a href="#">VIP会员</a>
                    </li>
                    <li class>
                        <a href="#">酷我畅听</a>
                    </li>
                    <li class>
                        <a href="#">酷我耳机</a>
                    </li>
                    <li class>
                        <a href="#">
                            更多
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 搜索块 -->
            <div class="search">
                <el-row class="demo-autocomplete">
                    <el-col :span="40">
                        <el-autocomplete
                            size="medium"
                            class="inline-input"
                            v-model="state1"
                            :fetch-suggestions="querySearch"
                            placeholder="搜索音乐/MV/歌单/歌手"
                        >
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-autocomplete>
                    </el-col>
                </el-row>
            </div>
            <!-- 登录块 -->
            <div class="login">
                <span>
                    <a href="#">登录</a>
                </span>
                <span>
                    <a href="#">/</a>
                </span>
                <span>
                    <a href="#">注册</a>
                </span>
            </div>
        </div>
        <!-- header end -->
    </div>
</template>

<script>
export default {
    name: 'Header',
    data() {
        return {
            restaurants: [],
            state1: "",
        };
    },
    methods: {
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString
                ? restaurants.filter(this.createFilter(queryString))
                : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (
                    restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
                    0
                );
            };
        },
        loadAll() {
            return [
                { value: "想某人" },
                { value: "Delete" },
                { value: "Just so so" },
                { value: "来自天堂的魔鬼" },
                { value: "想某人" },
                { value: "Delete" },
                { value: "Just so so" },
                { value: "来自天堂的魔鬼" },
            ];
        },
        handleSelect(item) {
            console.log(item);
        },
    },
    mounted() {
        this.restaurants = this.loadAll();
    },
};
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

/* container */
.container {
    min-width: 1180px;
    max-width: 1640px;
    padding: 0 120px;
    margin: 0 auto;
    height: 70px;
    border-bottom: 1px solid rgb(238, 233, 233);
}

/* header */

.header {
    /* background-color: black; */
    height: 100%;
    display: flex;
}

/* 选项区域 */

.header .choose {
    /* background-color: rgb(59, 59, 16); */
    height: 100%;
    flex: 60%;
    display: flex;
}

/* logo */

.header .choose .img_a {
    display: block;
    width: 170px;
    height: 100%;
    display: flex;
    align-items: center;
}

.header .choose .logo {
    width: 140px;
    height: 40.5px;
}

.choose ul {
    display: flex;
    list-style-type: none;
    flex: 1;
    line-height: 67px;
    font-size: 16px;
}

.choose ul li {
    flex: 1;
    text-align: center;
}

.choose ul li a {
    color: rgb(105, 94, 94);
    display: block;
    height: 100%;
    width: 100%;
}

.choose ul li .first_a {
    color: black;
}

.choose ul li a:hover {
    color: rgb(0, 0, 0);
}

/* 选项区域  end*/

/* 搜索 */

.header .search {
    /* background-color: blue; */
    height: 100%;
    flex: 30%;
    display: flex;
    justify-content: center;
}

/* 搜索框 */
.demo-autocomplete {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 登录 */

.header .login {
    /* background-color: indianred; */
    height: 100%;
    flex: 10%;
    line-height: 70px;
}
.header .login span a {
    color: rgb(82, 80, 80);
}

/* js */

.lis {
    background-color: yellow;
    font-weight: 600;
    color: black;
}
</style>